import React, { useState } from "react";
import { NavBar,Tabs,Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import './pingjia.css'
import './mydingd.css'
import axios from "axios"

import { useEffect } from "react";

export default function Pingjia() {

  const navigate = useNavigate();
  let [key,setKey] = useState('')
  let [list,setList] = useState([])
  let [status,setStatus] = useState(0)
  let [address,setAddress] = useState([])

  let getlist = async()=>{
    let res = await axios.get('/linmr/list')
    setList(res.data.data)
  }
 
 
  
  useEffect(()=>{
    getlist()
  },[])

  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
        <div className="pingjia">
            <NavBar onBack={() =>{navigate(-1)}}>我的订单</NavBar>
        </div>
        <div>
        <Tabs onChange={val=>{setStatus(val)}} style={{"--active-line-color":"rgb(153, 204, 51)","--active-title-color":"rgb(153, 204, 51)" }}>
        <Tabs.Tab title='全部' key='0'>
            
          </Tabs.Tab>
          <Tabs.Tab title='待付款' key='1'>
           
          </Tabs.Tab>
          <Tabs.Tab title='待收货' key='2'>
            
          </Tabs.Tab>
          <Tabs.Tab title='已评价' key='3'>
           
          </Tabs.Tab>
          <Tabs.Tab title='待评价' key='4'>
            
          </Tabs.Tab>
        </Tabs>
        <div className="pingjia-list">
            {list.filter(i=>{
                if(status == '0'){
                    return true
                }else{
                  return i.status == status
                }
              }).map(i=> <div key={i._id} className="aaa">
                <div className="dingdxq">
                    <span>订单号：{i.dingd}</span>
                    {i.status==1?<span style={{color:'red'}}> 待付款 </span>:''}
                    {i.status==2?<span style={{color:'red'}}> 待收货 </span>:''}
                    {i.status==3?<span style={{color:'red'}}> 已评价 </span>:''}
                    {i.status==4?<span style={{color:'red'}}> 待评价 </span>:''}
                </div>
                <hr/>
                <div className=" name">
                  <img src={i.img} alt="" /> 
                  <span className="name1">{i.name}</span>  
                  <span>￥{Number(i.price).toFixed(2)}</span>
                </div>
                <div className="num1">x{i.num}</div> 
               <hr />
               <div className="zongdollor">
                  <p>2024.09.26 18:23</p>
                  <p>金额：￥{Number(i.num*i.price).toFixed(2)}</p>
               </div>
                  {i.status==1?<p className="btn"><Button onClick={()=>{navigate('/daifukuan')}} size="mini">取消订单</Button> <Button  onClick={()=>{navigate('/daifukuan')}} size="mini" style={{"--text-color":"#fff","--background-color":"rgb(153, 204, 51)"}}>立即付款</Button></p>:''}  
                  {i.status==2?<p className="btn"><Button onClick={()=>{navigate('/daishouhuo')}} size="mini" style={{"--text-color":"#fff","--background-color":"rgb(153, 204, 51)"}}>确认收货</Button></p>:''}
                  {i.status==3?<p className="btn"><Button onClick={()=>{navigate('/yiwancheng')}} size="mini">删除订单</Button></p>:''}
                  {i.status==4?<p className="btn"><Button onClick={()=>{navigate('/pingjia')}} size="mini">前往评价</Button><Button onClick={()=>{navigate('/yiwancheng')}} size="mini">删除订单</Button></p>:''}
              </div> )}
            
          
        </div>
        
        </div>
    </div>
  );
}
